<template>
  <div class="login-wrapper">
    <div class="right">
      <div>
        <div class="icon">
          <img src="../assets/images/login.png" alt="" />
        </div>
        <div class="welcome-msg">
          你好，欢迎登录
          <br>
          博朋能源管理平台-电站端
        </div>
        <div class="desp">创新引领  “五大领域” ，光储 “双子星” 耀目问世</div>
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-position="top" class="login-form">
          <el-form-item label="账号" prop="loginName">
            <el-input size="large" v-model="loginForm.loginName" placeholder="请输入您的登录账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input :type="showPassword === false ? 'password' : 'text'" size="large" v-model="loginForm.password"
              placeholder="请输入您的密码" @keyup.enter="handleLogin">
              <template #suffix>
                <el-icon class="fs-20 pointer" style="font-size:20px" @click="showPassword = !showPassword">
                  <View v-if="!showPassword" />
                  <Hide v-else />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-checkbox v-model="loginForm.rememberMe"> 记住密码 </el-checkbox>
        <el-button type="primary" class="login-btn" @click="handleLogin" :loading="loading">
          {{ loading ? "登录中" : "登录" }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loginForm = ref({
  loginName: "bop2",
  password: "Admin123.",
  rememberMe: false,
})
const showPassword = ref(false)

const loginRules = {
  loginName: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
}

const loading = ref(false)

// 注册开关
const register = ref(false)
const redirect = ref(undefined)

watch(route, (newRoute) => {
  redirect.value = newRoute.query && newRoute.query.redirect
}, { immediate: true })

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("loginName", loginForm.value.loginName, { expires: 30 })
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 })
      } else {
        // 否则移除
        Cookies.remove("loginName")
        Cookies.remove("password")
        Cookies.remove("rememberMe")
      }
      // 调用action的登录方法
      userStore.login(loginForm.value).then(() => {
        const query = route.query
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== "redirect") {
            acc[cur] = query[cur]
          }
          return acc
        }, {})
        router.push({ path: redirect.value || "/", query: otherQueryParams })
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

function getCookie() {
  const loginName = Cookies.get("loginName")
  const password = Cookies.get("password")
  const rememberMe = Cookies.get("rememberMe")
  loginForm.value = {
    loginName: loginName === undefined ? loginForm.value.loginName : loginName,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  }
}

getCookie()
</script>

<style lang='scss' scoped>
.login-wrapper {
    height: 100%;
    background-color: #FFFCFC;
    background-image: url("../assets/images/login-background.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;

    .right {
        position: absolute;
        top: 0;
        right: 200px;
        height: 100%;
        width: 435px;
        display: flex;
        align-items: center;

        .icon {
            width: 80px;
            height: 78px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .welcome-msg {
            font-size: 24px;
            font-weight: bold;
            line-height: 40px;
            margin-top: 22px;
            color: #253440;
        }

        .desp {
            margin-top: 12px;
            color: #93A7B7;
            font-size: 16px;
            line-height: 22px;
        }

        .login-form {
            margin-top: 48px;

            :deep(.el-form-item) {
                margin-bottom: 16px;

                .el-form-item__label {
                    font-size: 16px;
                    line-height: 22px;
                    font-weight: bold;
                    color: #253440;
                }
            }

            .verify-code {
                width: 100%;
                display: flex;

                .verify {
                    width: calc(100% - 107px);
                }

                .code {
                    width: 95px;
                    height: 38px;
                    margin-left: 12px;
                    background-color: #fff;
                    border-radius: 4px;
                    border: 1px solid #dcdfe6;
                }
            }
        }

        :deep(.el-checkbox__label) {
            font-size: 14px;
            color: #93A7B7;
            line-height: 20px;
        }

        .login-btn {
            width: 100%;
            height: 48px;
            margin-top: 40px;
        }
    }

    // 设备的快速测试
    .test-device {
        position: absolute;
        right: 10px;
        top: 10px;
    }
}
</style>
